<template>
  <div class="transfer-container">
    <h2>转账界面</h2>
    <el-form class="transfer-form" :model="form" ref="form" label-width="80px">
      <el-form-item label="收款方">
      </el-form-item>
      <el-form-item label="收款账号" required prop="transID">
        <el-autocomplete
            class="inline-input"
            v-model="form.transID"
            :fetch-suggestions="querySearch"
            placeholder="请输入收款账号"
            :trigger-on-focus="false"
            @select="handleSelect">
        </el-autocomplete>
      </el-form-item>

      <el-form-item label="收账户名" required prop="name">
        <el-autocomplete
            class="inline-input"
            v-model="form.name"
            :fetch-suggestions="querySearchName"
            placeholder="请输入收账户名"
            :trigger-on-focus="false"
            @select="handleSelect2">
        </el-autocomplete>
      </el-form-item>
      <el-form-item label="转款卡" required prop="cardID">
        <el-select v-model="form.cardID"
                   size="large"
                   placeholder="请选择要转款的账号">
          <el-option
              v-for="item in accounts"
              :key="item.cardID"
              :label="item.cardID"
              :value="item.cardID">
            <div style="display: flex;justify-content: space-between;">
              <span><el-tag>{{ item.cardID }}</el-tag></span>
              <span style="color: red; font-size: 18px;margin-left: 10px">{{ item.balance }}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="转账金额" required prop="transMoney">
        <el-input-number
            v-model.number="form.transMoney"
            :min="0"
            :max="2000"
            :step="100"
            placeholder="请输入转账金额">
        </el-input-number>
      </el-form-item>
      <el-form-item label="备注" required prop="remark">
        <el-input v-model="form.remark" placeholder="请输入转账金额"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="transfer">确定转账</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: JSON.parse(window.localStorage.getItem("user")),
      form: {
        cardID: null,
        transID: null,
        transType: "转账",
        name: "",
        transMoney: null,
        remark: ""
      },
      accounts: [],
      accountsName: '',
      accountsNameqqq: "",
      pass: "",
    };

  },
  mounted() {
    this.initCardInfo();
    this.initNameqqq()
    this.initCardaccountsName()
  },
  methods: {
    querySearch(queryString, cb) {
      let restaurants1 = this.accountsName;
      var results = queryString ? restaurants1.filter(this.createFilter(queryString)) : restaurants1;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant1) => {
        return (restaurant1.value.toString().indexOf(queryString) === 0);
      };
    },
    querySearchName(queryString, cb) {
      var restaurants = this.accountsNameqqq;
      console.log(restaurants + "ppppp")
      var results = queryString ? restaurants.filter(this.createFilter2(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter2(queryString) {
      return (restaurant) => {
        return (restaurant.value.toString().indexOf(queryString) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleSelect2(item) {

      this.form.name = item.value;

    },
    initCardInfo() {
      let id = this.user[0].customerID
      this.getRequest(`/api/card/user/${id}`).then(resp => {
        if (resp) {
          if (resp.code == 1) {
            this.accounts = resp.data
            // this.accountsName = resp.data.map(item => {
            //   return {
            //     value: item.cardID.toString(),
            //   }
            // });
            console.log(this.accounts)
          }
        }
      })
    },
    initCardaccountsName() {
      this.getRequest("/api/card").then(res => {
        if (res) {
          if (res.code == 1) {
            this.accountsName = res.data.map(item => {
              return {
                value: item.cardID.toString(),
              }
            });
            console.log(this.accountsName)
          }
        }
      })
    },
    initNameqqq() {
      let id = this.user[0].customerID
      this.getRequest(`/api/card/nameandcardid/${id}`).then(resp => {
        if (resp) {
          if (resp.code == 1) {
            this.accountsNameqqq = resp.data.map(item => {
              return {
                value: item.username + "        " + item.cardID,
                name: item.cardID,
              }
            });
            console.log(this.accounts)
          }
        }
      })
    },
    transfer() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$prompt('请输入密码', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({value}) => {
            const data = {
              cardID: this.form.cardID,
              pass: value
            }
            this.postRequest("/api/card/iscorrect", data).then(resp => {
              if (resp) {
                if (resp.code == 0) {
                  this.$message.error("密码错误");
                } else {
                  // 执行转账操作，可以根据业务需求进行相应逻辑处理
                  this.postRequest("/api/trans", this.form).then(resp => {
                    if (resp) {
                      if (resp.code == 1) {
                        this.$message.success('转账成功');
                        this.resetForm();
                      }
                    }
                  })
                }
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });
          });

        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

<style scoped>


h2 {
  text-align: center;
  margin-bottom: 30px;
}
</style>
